<template>
  <!-- 商品详情卡片 -->
  <div class="bg-white detailCard">
    <!-- 卡片左边 -->
    <div class="detailCardLeft">
      <!-- 卡片左上 -->
      <div class="detailCardLeftTop">
        <div class="detailCardLeftTopT">
          <div class="detailCardLeftTopLeft">虎门酒店(海之光自助餐)</div>
          <span class="detailCardLeftTopRight" @click="foodShow = true"
            ><b></b>食品安全档案</span
          >
        </div>
        <div class="detailCardLeftTopB text-14px">
          <div class="star-cont">
            <ul class="stars-ul">
              <li><i class="iconfont icon-star"></i></li>
              <li><i class="iconfont icon-star"></i></li>
              <li><i class="iconfont icon-star"></i></li>
              <li><i class="iconfont icon-star"></i></li>
              <li><i class="iconfont icon-star"></i></li>
            </ul>
            <ul class="stars-ul stars-light" style="width: 60.48px">
              <li><i class="iconfont icon-star"></i></li>
              <li><i class="iconfont icon-star"></i></li>
              <li><i class="iconfont icon-star"></i></li>
              <li><i class="iconfont icon-star"></i></li>
              <li><i class="iconfont icon-star"></i></li>
            </ul>
          </div>
          <div class="iconText pl-4px">3.6分人均￥99</div>
        </div>
      </div>
      <!-- 卡片左中 -->
      <div class="detailCardLeftMiddle">
        <div class="Address">地址: 虎门镇美思威尔顿酒店61楼</div>
        <div class="telPhone">电话: 0769-82888888</div>
        <div class="tradeTime">营业时间: 周一至周日 06:30-21:00</div>
      </div>
      <!-- 卡片左下 -->
      <div class="detailCardLeftBottom">
        <ul>
          <li>
            <img
              src="@/assets/image/wifi.png"
              class="w-24px h-24px ml-10px mb-10px"
            />提供wifi
          </li>
        </ul>
      </div>
    </div>
    <!-- 卡片右边 -->
    <div class="detailCardRight" @click="cardShow = true">
      <div class="imgBox">
        <img src="@/assets/image/dazaxie.jpg" class="rounded-5px" alt="" />
      </div>
      <ul class="imgList">
        <li class="mr-5px"><img src="@/assets/image/1.jpg" /></li>
        <li class="mr-5px"><img src="@/assets/image/2.jpg" /></li>
        <li class="mr-5px"><img src="@/assets/image/3.jpg" /></li>
        <li><img src="@/assets/image/4.jpg" /></li>
      </ul>
    </div>
    <!-- Card点击出大轮播图 -->
    <div v-if="cardShow" class="imageViewer-content">
      <div class="imgs-content">
        <div class="header">
          <span
            class="iconfont icon-cancel close"
            @click="cardShow = false"
          ></span>
        </div>
        <div class="content-arrow-imgs" @click="cardShow = true">
          <div class="figure" style="max-height: 496px">
            <div class="image-box">
              <img
                class="image"
                :src="cardList[imgIndex].img"
                style="cursor: auto"
              />
            </div>
            <div class="footer">
              <div class="footerCount">
                {{ imgIndex + 1 }} / {{ cardList.length }}
              </div>
            </div>
          </div>
          <div
            type="button"
            class="arrow"
            @click="prev"
            :class="imgIndex === 0 ? 'pre-dis' : 'left-arrow'"
          ></div>
          <div
            type="button"
            class="arrow"
            @click="next"
            :class="
              imgIndex === cardList.length - 1 ? 'next-dis' : 'right-arrow'
            "
          ></div>
        </div>
        <div class="paginatedThumbnails" @click="cardShow = true">
          <div class="thumbnails">
            <div
              class="thumbnail"
              :class="item.img == cardList[imgIndex].img ? 'active' : ''"
              v-for="(item, index) in cardList"
              :key="index"
              @click="imgSelect(index)"
            >
              <img :src="item.img" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Food v-if="foodShow" @foodShow="foodShow = $event" />
</template>

<script>
import { cardListApi } from "@/api/details";
import { defineComponent, onMounted, ref } from "vue";
import Food from "../Food";
export default defineComponent({
  name: "Card",
});
</script>

<script setup>
// 点击图片切换大图
const imgSelect = (index) => {
  imgIndex.value = index;
};
// 控制Card轮播图显示
const cardShow = ref(false);
// 食品安全
const foodShow = ref(false);
// 第几张图片
const imgIndex = ref(0);
const cardList = ref();
// 切换下一张
const next = () => {
  if (imgIndex.value == cardList.value.length - 1) return;
  imgIndex.value += 1;
};
// 切换上一张
const prev = () => {
  if (imgIndex.value == 0) return;
  imgIndex.value -= 1;
};
onMounted(async () => {
  const res = await cardListApi();
  cardList.value = res;
});
</script>
<style lang="less" scoped>
.detailCardLeftTopRight {
  cursor: pointer;
}
/* Card轮播图 */
.detailCard .imageViewer-content {
  width: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2001;
  box-shadow: border-box;
  height: 100%;
  left: 0;
  top: 0;
  .imgs-content {
    width: 1190px;
    height: 100%;
    padding-top: 30px;
    margin: auto;
    overflow: hidden;
    .paginatedThumbnails {
      width: 1190px;
      height: 107px;
      position: absolute;
      bottom: 20px;
      overflow: hidden;
      .right-arrow {
        right: 0;
        background-image: url(../../../../assets/image/right1.png);
        background-size: 100% 100%;
      }

      .arrow {
        cursor: pointer;
        z-index: 2001;
        position: absolute;
        display: block;
        width: 30px;
        height: 107px;
        top: 0;
        //margin-top: -10px;
      }

      .thumbnails {
        position: relative;
        width: 10000px;
        .active {
          box-sizing: border-box;
          border: 2px solid #fff;
          border-radius: 4px;
        }
        .thumbnail {
          cursor: pointer;
          width: 190px;
          height: 107px;
          display: inline-block;
          margin-right: 10px;
          box-sizing: border-box;
          img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
        }
      }
    }
    .content-arrow-imgs {
      position: relative;
      .arrow {
        position: absolute;
        display: block;
        width: 50px;
        height: 50px;
        top: 50%;
        margin-top: -25px;
        cursor: pointer;
      }
      .pre-dis {
        background-image: url(../../../../assets/image/left.png);
        background-size: 100% 100%;
        left: 0;
        // cursor: not-allowed;
      }
      .left-arrow {
        left: 0;
        background-image: url(../../../../assets/image/left2.png);
        background-size: 100% 100%;
      }
      .right-arrow {
        background-image: url(../../../../assets/image/right.png);
        background-size: 100% 100%;
        right: 0;
      }
      .next-dis {
        right: 0;
        background-image: url(../../../../assets/image/右禁用.png);
        background-size: 100% 100%;
        cursor: not-allowed;
      }
      .figure {
        width: 60%;
        margin: auto;
        position: relative;
        overflow: hidden;

        .footer {
          position: absolute;
          bottom: 0;
          left: 56px;
          width: 84.2%;
          height: 30px;
          background: rgba(0, 0, 0, 0.4);
          .footerCount {
            line-height: 30px;
            color: #fff;
            font-size: 14px;
            padding-left: 12px;
          }
        }
        .image-box {
          width: 100%;
          height: 100%;
          img {
            display: block;
            height: auto;
            margin: 0 auto;
            max-width: 100%;
          }
        }
      }
    }
    .header {
      height: 30px;
      margin: 0 30px 40px 0;
      text-align: right;
      .close {
        width: 30px;
        height: 30px;
        font-size: 30px;
        cursor: pointer;
        display: inline-block;
        background: 0 0;
        color: #fff;
        border: 0;
      }
    }
  }
}
/* Card轮播图 */

.imgList {
  display: flex;
  li {
    padding-top: 10px;
  }
  img {
    border-radius: 5px;
  }
}
.detailCardLeftBottom {
  ul {
    padding-top: 20px;
  }
  ul li {
    display: flex;
    justify-content: center;
    flex-flow: column;
    height: 52px;
  }
}
.detailCardLeftMiddle {
  height: 119px;
  display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  border-bottom: 1px solid green;
  font-size: 14px;
}
.detailCardLeftTopB {
  display: flex;
  // transform: translateY(20%);
  height: 35px;
  line-height: 35px;
  .star-cont {
    display: inline-block;
    width: 84px;
    height: 24px;
    position: relative;
    .stars-light {
      color: #f90;
      position: absolute;
      top: 0;
      overflow: hidden;
    }
    .stars-ul {
      margin: 0;
      li {
        margin: 0 !important;
        border: 0 !important;
        padding: 0 2px;
        display: inline-block;
        .iconfont {
          font-size: 12px;
        }
      }
    }
  }
}
.star-cont .stars-light,
.star-cont .stars-ul {
  list-style: none;
  padding: 0;
  text-align: left;
  margin: 3px 0;
  white-space: nowrap;
  color: #c3c3c3;
}
.detailCardLeftTopLeft {
  font-size: 26px;
  line-height: 37px;
  color: #666;
}
.detailCardLeftTopT {
  line-height: 37px;
  display: flex;
  justify-content: space-between;
}
.detailCard {
  font-size: 12px;
  color: #666;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 20px 33px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 5px 14px 0 rgb(0 0 0 / 10%);
  display: flex;

  .detailCardLeft {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    padding-right: 20px;
    width: 70%;
    span b {
      background-image: url(../../../../assets/image/shipin.png);
      width: 15px;
      height: 18px;
      background-size: 100% 100%;
      display: inline-block;
      margin-right: 6px;
      vertical-align: middle;
      margin-top: -3px;
    }
    .detailCardLeftTop {
      border-bottom: 1px solid green;
      line-height: 100%;
    }
  }
  .detailCardRight {
    // width: 30%;
    cursor: pointer;
  }
}
</style>
